<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>数字动画插件countUp</title>
 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
 <script src="countUp.js"></script>
 <style>
     *{margin: 0px;padding:0px;}
     #box{margin: 0 auto;margin-top: 150px;text-align: center;font-size: 28px;font-weight: bold;}
     #box span{padding:0px 30px;}
 </style>
 </head>
 <body>
 <div id="box">
     <span id="n1"></span>
     <span id="n2"></span>
     <span id="n3"></span>
 </div>
 <script type="text/javascript">
 var options = {
    useEasing: true, // 是否使用缓动动画，默认为缓动，可以设置为false让其匀速
    useGrouping: true, // 使用分组(是否显示千位分隔符,一般为 true)
    separator: '', // 分组时使用的分隔符，默认是逗号，不加不显示
    decimal: '.', // 小数点符号,默认为 '.'
    //easingFn: easeOutExpo, // 缓动动画的函数
    //formattingFn: formatNumber, // 格式化数字如12345，格式化为123，45
    prefix: '', // 字首(数字的前缀,根据需要可设为 $,¥,￥ 等)
    suffix: '人民币' // 后缀(数字的后缀 ,根据需要可设为 元,个,美元等) 
 };
 $(function() {
    new CountUp("n1", 1000, 2024.36, 0, 5, options).start();
    new CountUp("n2", 2024, 2099, 2, 5, options).start();
    new CountUp("n3", 1999, 2023.12, 2, 5, options).start();
 });
 </script>
 </body>
</html>
